<template>
    <div class="orderList">
        <ul v-if="type==0">
            <!-- 我发布的 -->
            <li v-for="(item,key) in list" :key="'orderList'+key" @click="detail(item,type)" v-lockClick>
                <div class="top-state px1bb" :class="{'orange':item.status=='sale'}">
                    {{orderStatus[item.status]}}
                </div>
                <div class="content">
                    <div class="icon-bg">
                        <div class="goods-icon" v-lazy:background-image="item.icon"></div>
                    </div>
                    <div class="con-right">
                        <div class="goods-tit">{{item.title}}</div>
                        <div class="goods-specifications">{{item.specification}}</div>
                        <div class="goods-amonut">
                            <div>¥</div>
                            <div>{{item.price}}</div>
                        </div>
                    </div>
                </div>
                <div class="bottom px1bt" v-if="item.status=='sale'||item.status=='off'">
                    <div class="btns">
                        <span class="minbtn" v-if="item.status=='sale'" @click.stop="priceReduction(item)">降价</span>
                        <span class="minbtn" v-if="item.status=='sale'" @click.stop="edit(item)">编辑</span>
                        <span class="minbtn" v-if="item.status=='sale'" @click.stop="cancleSell(item)">取消转售</span>
                        <span class="minbtn" v-if="item.status=='off'" @click.stop="deleteOrder(item)">删除</span>
                        <span class="minbtn" v-if="item.status=='off'" @click.stop="reinstall(item)">重新上架</span>
                    </div>
                </div>
            </li>
        </ul>
        <ul v-if="type==1">
            <!-- 已卖出的 -->
            <li v-for="(item,key) in list" :key="'orderList'+key" @click="detail(item,type)">
                <div class="two-state px1bb">
                    <div class="two-state-left">
                        <img :src="item.userIcon" />
                        <span class="buy-name" v-if="item.nickName">
                            {{item.nickName}}
                        </span>
                        <span class="buy-name" v-else>
                            {{item.userName|mobileSecretFormat}}
                        </span>
                    </div>
                    <div class="two-state-right" :class="{'red':item.orderFlag=='REFUND'&&item.refundFlag!='SUCC','orange':item.orderFlag!='REFUND'&&item.orderFlag!='CANCEL'&&item.orderFlag!='EXPIRE'&&item.orderFlag!='FINISHED'&&item.orderFlag!='REFUND'}">
                        {{item.orderFlag!="REFUND"?orderFlagSell[item.orderFlag]:refundFlag[item.refundFlag]}}
                    </div>
                </div>
                <div class="content">
                    <div class="icon-bg">
                        <div class="goods-icon" v-lazy:background-image="item.goodsImg"></div>
                    </div>
                    <div class="con-right">
                        <div class="goods-tit">{{item.goodsName}}</div>
                        <div class="goods-specifications">{{item.goodsSpec}}</div>
                        <div class="goods-amonut">
                            <div>¥</div>
                            <div>{{item.goodsPrice}}</div>
                        </div>
                    </div>
                </div>
                <div class="bottom px1bt" v-if="item.orderFlag=='WAIT_SEND'||item.orderFlag=='WAIT_RECEIVE'||(item.orderFlag=='REFUND'&&item.refundFlag=='APPLY')">
                    <div class="btns">
                        <span class="minbtn green" v-if="item.orderFlag=='WAIT_SEND'" @click.stop="logistics(item)">去发货</span>
                        <span class="minbtn" v-if="item.orderFlag=='WAIT_RECEIVE'" @click.stop="logisticsInfo(item)">查看物流</span>
                        <span class="minbtn green-border" v-if="item.orderFlag=='REFUND'&&item.refundFlag=='APPLY'" @click.stop="refund(item,'REFUSE')">拒绝退款</span>
                        <span class="minbtn green-border" v-if="item.orderFlag=='REFUND'&&item.refundFlag=='APPLY'" @click.stop="refund(item,'AGREE')">同意退款</span>
                    </div>
                </div>
            </li>
        </ul>
        <ul v-if="type==2">
            <!-- 我买到的 -->
            <li v-for="(item,key) in list" :key="'orderList'+key" @click="detail(item,type)">
                <div class="two-state px1bb">
                    <div class="two-state-left" :class="{'red':item.orderFlag=='WAIT_PAY'||item.orderFlag=='PAY_FAILED'||(item.orderFlag=='REFUND'&&item.refundFlag!='SUCC'),'orange':item.orderFlag!='REFUND'&&item.orderFlag!='CANCEL'&&item.orderFlag!='EXPIRE'&&item.orderFlag!='FINISHED'}">
                        {{item.orderFlag!="REFUND"?orderFlagBuy[item.orderFlag]:refundFlag[item.refundFlag]}}
                    </div>
                    <div class="two-state-right block" v-if="item.orderFlag=='WAIT_PAY'||item.orderFlag=='PAY_FAILED'">
                        剩余付款时间 <span :ref="'numtype2'+key">{{item.gmtCreate | countDown(reload,getThis,'numtype2'+key,item.expireTime)}}</span>
                    </div>
                </div>
                <div class="content">
                    <div class="icon-bg">
                        <div class="goods-icon" v-lazy:background-image="item.goodsImg"></div>
                    </div>
                    <div class="con-right">
                        <div class="goods-tit">{{item.goodsName}}</div>
                        <div class="goods-specifications">{{item.goodsSpec}}</div>
                        <div class="goods-amonut">
                            <div>¥</div>
                            <div>{{item.goodsPrice}}</div>
                        </div>
                    </div>
                </div>
                <div class="bottom px1bt" v-if="item.orderFlag=='WAIT_PAY'||item.orderFlag=='PAY_FAILED'||item.orderFlag=='WAIT_SEND'||item.orderFlag=='WAIT_RECEIVE'||item.orderFlag=='FINISHED'">
                    <div class="btns">
                        <span class="minbtn" v-if="item.orderFlag=='WAIT_PAY'||item.orderFlag=='PAY_FAILED'" @click.stop="cancleOrder(item)">取消订单</span>
                        <span class="minbtn green" v-if="item.orderFlag=='WAIT_PAY'||item.orderFlag=='PAY_FAILED'" @click.stop="pay(item)" v-lockClick>去支付</span>
                        <span class="minbtn" v-if="item.orderFlag=='WAIT_SEND'" @click.stop="applyRefund(item)">申请退款</span>
                        <span class="minbtn" v-if="item.orderFlag=='WAIT_RECEIVE'||item.orderFlag=='FINISHED'" @click.stop="afterSale(item)">申请售后</span>
                        <span class="minbtn" v-if="item.orderFlag=='WAIT_RECEIVE'" @click.stop="logisticsInfo(item)">查看物流</span>
                        <span class="minbtn green" v-if="item.orderFlag=='WAIT_RECEIVE'" @click.stop="receivedGoods(item)">确认收货</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import native from '@/libs/native';
import orderMixins from './orderMixins';
export default {
    mixins:[orderMixins],
    props:{
        type:{
            type:Number,
            default:0
        },
        list:{
            type:Array,
            default:[],
        }
    },
    data() {
        return {
            orderFlagSell:{
                "WAIT_PAY":"等待买家付款",
                "PAYING":"等待买家付款",
                "PAY_FAILED":"等待买家付款",
                "WAIT_SEND":"待发货",
                "WAIT_RECEIVE":"待收货",
                "CANCEL":"已取消",
                "EXPIRE":"已取消",
                "FINISHED":"已完成",
                "REFUND":"退款中",
            },
            orderFlagBuy:{
                "WAIT_PAY":"待付款",
                "PAYING":"支付中",
                "PAY_FAILED":"待付款",
                "WAIT_SEND":"待发货",
                "WAIT_RECEIVE":"待收货",
                "CANCEL":"已取消",
                "EXPIRE":"已取消",
                "FINISHED":"已完成",
                "REFUND":"退款中",
            },
            refundFlag:{
                "SUCC":"已退款",
                "REFUSE":"退款中",
                "APPLY":"退款中",
                "PROCE":"退款中",
                "FAIL":"退款中",
            },
            orderStatus:{
                "audit":"审核中",
                "sale":"售卖中",
                "off":"已下架",
            },
        }
    },
    methods: {
        ...mapActions(['toggleLoading','showMsg','showModal']),
        getThis(){
            return this;
        },
        reload(){
            this.$emit('reload');
        },
        //降价
        priceReduction(data){
            this.$emit('priceReduction',data);
        },
        //编辑
        edit(data){
            this.$router.push({path:'uploadGoods',query:{id:data.id,'originType':'h5'}});
        },
        //取消转售
        cancleSell(data){
            this.showModal({
                content: "<p>确定取消转售吗？</p><p>取消转售后商品将下架，不可被购买</p>",
                btns: ["取消", "确定"],
                callbacks: [()=>{}, ()=>{
                    this.toggleLoading({flag:true});
                    this.$ajax.appGoodsPutDown({id:data.id}).then(res=>{
                        this.toggleLoading({flag:false});
                        if(res.code=='0000'){
                            this.showMsg({ content: '取消转售成功' });
                            this.reload();
                        }
                    })
                }]
            });

        },
        //重新上架
        reinstall(data){
            this.edit(data);
        },
        //删除订单
        deleteOrder(data){
            this.showModal({
                content: "确定删除订单吗？",
                btns: ["取消", "确定"],
                callbacks: [()=>{}, ()=>{
                    this.toggleLoading({flag:true});
                    this.$ajax.appGoodsRemove({id:data.id}).then(res=>{
                        this.toggleLoading({flag:false});
                        if(res.code=='0000'){
                            this.showMsg({ content: '删除成功' });
                            this.reload();
                        }
                    })
                }]
            });

        },
        //详情
        detail(data,type){
            if(type==0){
                //商品详情页
                native.goGoodsDetail(data.id);
            }else{
                this.$router.push({path:'orderDetail',query:{type:type,orderId:data.id}})
            }
        },
    },
}
</script>
<style lang="less" scoped>
    .orderList{
        ul{
            li{
                background: #fff;
                padding: 0 .2rem;
                margin-top: .2rem;
                .top-state{
                    font-size: .28rem;
                    color: #999;
                    height: .8rem;
                    display: flex;
                    align-items: center;
                    // border-bottom: .02rem solid #EEE;
                    &.orange{
                        color: #FFBE1E;
                    }
                    &.red{
                        color: #FF4137;
                    }
                }
                .two-state{
                    height: .8rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    // border-bottom: .02rem solid #EEE;
                    .two-state-left{
                        display: flex;
                        align-items: center;
                        img{
                            width: .4rem;
                            height: .4rem;
                            border-radius: .4rem;
                            background: #FAFAFA;
                        }
                        .buy-name{
                            margin-left: .1rem;
                            color: #333;
                            font-size: .24rem;
                        }
                        &.red{
                            color: #FF4137;
                        }
                        &.orange{
                            color: #FFBE1E;
                        }
                    }

                    .two-state-right{
                        font-size: .28rem;
                        color: #999;
                        &.orange{
                            color: #FFBE1E;
                        }
                        &.block{
                            color: #333;
                        }
                        &.red{
                            color: #FF4137;
                        }
                    }
                }

                .content{
                    padding: .2rem 0;
                    display: flex;
                    img{

                    }
                    .icon-bg{
                        width: 1.6rem;
                        height: 1.6rem;
                        background: #FAFAFA;
                        overflow: hidden;
                        .goods-icon{
                            // background-image: url(//gw.alicdn.com/bao/uploaded/i3/O1CN01EvEfB91YXBhHskBRd_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp);
                            width: 1.6rem;
                            height: 1.6rem;
                            background-size: cover;
                            background-repeat: no-repeat;
                            background-position: center center;
                        }
                    }
                    
                    .con-right{
                        margin-left: .2rem;
                        width: 5rem;
                        font-size: .28rem;
                        color: #333;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        .goods-tit{
                            overflow: hidden;
                            text-overflow:ellipsis;
                            white-space: nowrap;
                        }
                        .goods-specifications{
                            font-size: .24rem;
                            color: #999;
                            margin: .1rem 0;
                        }
                        .goods-amonut{
                            display: flex;
                            align-items: flex-end;
                            height:.4rem;
                            div{
                                font-weight:400;
                                &:nth-child(1){
                                    color: #FF4137;
                                    font-size: .24rem;
                                    line-height:.32rem;
                                }
                                &:nth-child(2){
                                    margin-left: .02rem;
                                    line-height:.4rem;
                                    color: #FF4137;
                                    font-size: .32rem;
                                }
                            }
                        }
                    }
                }
                .bottom{
                    // border-top: .02rem solid #EEE;
                    position: relative;
                    height: .96rem;
                    .btns{
                        // transform: scale(0.5,0.5);
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        height: 100%;
                        .minbtn{
                            color: #333;
                            border: 0.02rem solid #ddd;
                            height: .56rem;
                            border-radius: .56rem;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: .26rem;
                            margin: 0 .1rem;
                            width: 1.6rem;
                            &.grad{
                                color: #ccc;
                                border: 0.02rem solid #ccc; 
                            }
                            &.green{
                                color: #fff;
                                background: #14C878;
                                border: 0.02rem solid #14C878;
                            }
                            &.green-border{
                                color:#14C877;
                                border: 0.02rem solid #14C877;
                            }
                        }
                    }
                }
            }
        }

    }
</style>